<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>欢迎！</title>
    <link rel="stylesheet" th:href="@{/css/login.css}">
</head>
<body>
<div class="container">
    <div class="form-warp">
        <form class="sign-in-form" onsubmit="return false;">
            <h2 class="form-title">登录到系统</h2>
            <input id="loginPhone" name="phone" placeholder="手机号"/>
            <input id="loginPassWord" name="passWord" placeholder="密码" type="password"/>
            <bottom class="submit-btn" id="login">立即登录</bottom>
        </form>
        <form class="sign-up-form" onsubmit="return false;">
            <h2 class="form-title">注册账户</h2>
            <input id="name" name="userName" placeholder="姓名">
            <input id="phone" name="phone" placeholder="手机号"/>
            <input id="emergencyPhone" name="emergencyPhone" placeholder="紧急联系人手机号"/>
            <select name="sex">
                <option value="1">男</option>
                <option value="0">女</option>
            </select>
            <input id="passWord" name="passWord" placeholder="密码" type="password"/>
            <bottom class="submit-btn" id="register">立即注册</bottom>
        </form>
    </div>
    <div class="desc-warp">
        <div class="desc-warp-item sign-up-desc">
            <div class="content">
                <button id="sign-up-btn">注册</button>
            </div>
            <img alt="" th:src="@{/img/log.svg}">
        </div>
        <div class="desc-warp-item sign-in-desc">
            <div class="content">
                <button id="sign-in-btn">登录</button>
            </div>
            <img alt="" th:src="@{/img/register.svg}">
        </div>
    </div>
</div>
<script th:src="@{/js/login.js}"></script>
<script th:src="@{/js/jquery-3.6.0.min.js}"></script>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['layer'], function () {
        var $ = layui.$
            , layer = layui.layer;

        //对手机号码进行检查
        function ReCheck(element, re, tips) {
            if (!re.test($(element).val())) {
                layer.msg("[提示]" + tips);
                return false;
            }
            return true;
        }

        function LengthCheck(element, minLength, maxLength, tips) {
            let e = $(element).val()
            if (!(e.length >= minLength && e.length <= maxLength)) {
                layer.msg("[提示]" + tips);
                return false;
            }
            return true;
        }

        $("#phone").blur(function () {
            if ($('#phone').val().length == 11) {
                $.ajax({
                    type: 'post',
                    url: '/checkphone',
                    data: {'phone': $('#phone').val()},
                    dataType: "json",
                    success: function (Msg) {
                        if (Msg.code != 200) {
                            layer.msg(Msg.msg);
                        }
                    }
                })
            }
        });
        //对表单数据的提交事件的监听
        $("#login").click(function () {
            let regPhone = /^[1][3,4,5,7,8,9][0-9|*]{9}$/;
            let regPassWord = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            if (!LengthCheck("#loginPassWord", 8, 16, "密码长度为8-16位之间！") ||
                !LengthCheck("#loginPhone", 11, 11, "手机号长度不正确！") ||
                !ReCheck("#loginPhone", regPhone, "手机号规则不正确！") ||
                !ReCheck("#loginPassWord", regPassWord, "密码必须包含字母和数字，且在6~18位之间！"))
                return;
            let data = $(".sign-in-form").serialize();
            $.ajax({
                type: 'post',
                url: '/dologin',
                data: data,
                success: function (Msg) {
                    if (Msg.code != 200) {
                        layer.msg(Msg.msg);
                    } else {
                        window.location.href = "/index";
                    }
                }
            })


        })
        $("#register").click(function () {
            let regPhone = /^[1][3,4,5,7,8,9][0-9|*]{9}$/;
            let regPassWord = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            if (!LengthCheck("#name", 2, 6, "请输入正确的用户名！") ||
                !LengthCheck("#passWord", 8, 16, "密码长度为8-16位之间！") ||
                !LengthCheck("#phone", 11, 11, "手机号长度不正确！") ||
                !LengthCheck("#emergencyPhone", 11, 11, "紧急联系人手机号长度不正确！") ||
                !ReCheck("#phone", regPhone, "手机号规则不正确！") ||
                !ReCheck("#passWord", regPassWord, "密码必须包含字母和数字，且在6~18位之间！"))
                return;
            let data = $(".sign-up-form").serialize();
            $.ajax({
                type: 'post',
                url: '/register',
                data: data,
                success: function (Msg) {
                    if (Msg.code != 200) {
                        layer.msg(Msg.msg);
                    } else {
                        window.location.href = "/index";
                    }
                }
            })
        });
    })
</script>
</body>
</html>